<!--
 * @Description:
 * @Version: 1.0
 * @Autor: haozhuang
 * @Date: 2020-04-28 14:34:17
 * @LastEditors: haozhuang
 * @LastEditTime: 2020-05-07 17:39:37
 -->
<template>
  <el-dialog
    title="设置角色"
    :visible.sync="setRoleData.dialogFormVisible"
    @close="handleClose"
  >
    <el-select
      v-model="setRoleData.roleIds"
      filterable
      placeholder="请选择"
      value-key="id"
      multiple
      style="width:100%"
    >
      <el-option
        v-for="item in roleList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button @click="colseDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="userUpdateRole('ruleForm')"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { mapGetters } from 'vuex'
// import uploader from '@/components/uploader'
import { getRoleList, userUpdateRole } from '@/api/jurisdiction'
export default {
  name: 'Home',
  components: {},
  props: {
    setRoleData: {
      type: Object,
      default: function() {
        return {
          dialogFormVisible: false,
          userId: '',
          roleIds: ''
        }
      }
    }
  },
  data() {
    return {
      roleList: []
    }
  },
  computed: {},
  created() {},
  methods: {
    getRoleList() {
      getRoleList()
        .then(result => {
          const { data } = result
          this.roleList = data
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    userUpdateRole() {
      console.log(this.setRoleData)
      const { userId, roleIds } = this.setRoleData
      console.log(userId)
      console.log(roleIds)
      userUpdateRole(userId, roleIds.join(','))
        .then(result => {
          this.colseDialog()
        })
        .catch(err => {
          console.log(err)
        })
    },
    colseDialog() {
      this.$emit('colseDialog')
    },
    handleClose() {
      this.resetForm('ruleForm')
    }
  }
}
</script>
<style  >
</style>
